<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script>
        init();
        window.onresize = init;
        function init(){
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 7.5 + 'px';
        }
    </script>
    <title>对订单有疑问</title>
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/complain.css?v=2">
    <script src="{$_G['URL']['YX2020_CSS']}js/jquery.js"></script>
</head>
{if !empty($complain) }
<body>
<div class="page dialog" style="display: block;position: inherit;" >
    <div class="page__bd">
        <div class="weui-cells weui-cells_after-title">
            <div class="weui-cell" aria-role="option" style="padding-bottom: 0px;">
                <div class="weui-cell__bd" >用户发起投诉</div>
            </div>
            <div class="weui-cells__title" style="margin-top: 3px;">({$complain['type']})</div>
        </div>
        <div class="weui-cells__title">{$complain['content']}</div>
        <div class="weui-cells__title">{$complain['created_at']}</div>

        {loop $complain['reply_info'] $row}
        <div class="weui-cells weui-cells_after-title">
            <div class="weui-cell" aria-role="option" style="padding-bottom: 0px;">
                <div class="weui-cell__bd" >{$row['type']}</div>
            </div>
        </div>
        <div class="weui-cells__title">{$row['reply']}</div>
        <div class="weui-cells__title" >{$row['time']}</div>
        {/loop}

        {if $complain['status']==3}
        <div class="button-sp-area">
            <a open-type="navigateBack" class="weui-btn weui-btn_primary" style="width: 6rem" aria-role="button" href="javascript:goHome()">问题已解决,返回上一页</a>
        </div>
        <div class="button-sp-area">
            <a open-type="navigateBack" class="weui-btn weui-btn_primary" style="width: 6rem; background-color:#4463fb;" aria-role="button" href="/{php echo createMobileUrl('complain', array('themeid'=>$themeid,'op'=>'newquestion'));}">发起新的</a>
        </div>
        {else}
        <form>
            <div class="weui-cells weui-cells_after-title">
                <div class="weui-cell weui-cell_active" style="padding:0.32rem 0.32rem 0rem 0.32rem">
                    <div class="weui-cell__bd" style="font-size: 0.326rem;color: rgba(0,0,0,.9);">回复</div>
                    <div class="weui-cell__bd" style="border: 0.01rem solid rgba(0,0,0,.1);">
                        <textarea name="content" class="weui-textarea" placeholder-class="weui-input__placeholder" id="detail3" placeholder="请回复信息" style="height: 4.3em"></textarea>
                        <div aria-role="option" class="weui-textarea-counter"><span id="txtNum">0</span>/400</div>
                    </div>
                </div>
            </div>
            <div class="button-sp-area">
                <a class="weui-btn weui-btn_primary reply" style="background-color:#4463fb">回复</a>
                <a open-type="navigateBack" class="weui-btn weui-btn_primary resolved" aria-role="button">问题已解决</a>
                <input name="com_id" type="hidden" id="com_id" value="{$complain['id']}" />
            </div>
        </form>
        {php $reply_info = $complain['reply_info'];}
        {if $complain['status'] == 2 && count($reply_info) > 0 && $reply_info[count($reply_info)-1]['type'] =='用户回复'}
            <div class="weui-cells__title" style="text-align: center;">您的信息已反馈，待管理员确认回复</div>
        {/if}
        {/if}
    </div>
    <div class="tips"><span>请输入手机号</span></div>
</div>
{else}
<body style="height: 100%;">
<div class="page" id="home">
    <div class="page__bd">
        <div class="weui-cells__title q-title">请问您遇到了什么问题？</div>
        <div class="weui-cells weui-cells_after-title">
            {loop $content $key $row}
            <div class="item">
                <div href="javascript:choose('{$row}')" class="weui-cell weui-cell_access openDialog" hover-class="weui-cell_active">
                    <div class="weui-cell__bd">{$row['title']}</div>
                    <div class="weui-cell__ft weui-cell__ft_in-access"></div>
                </div>
                {if $row['type']=='dialog'}
                <div class="dialog detail-box">
                    <div class="weui-cells__title q-title">{$row['title']}</div>
                    <div class="q-content">
                        {loop $row['list'] $item}
                        {if $item['type']=='txt'}
                        <div>{$item['title']}</div>
                        {elseif $item['type']=='mobile' && !empty($item['value'])}
                        <div>{$item['title']}<a href="tel:{$item['value']}">{$item['value']}</a></div>
                        {else}
                        {/if}
                        {/loop}
                    </div>
                    <div class="weui-btn weui-btn_primary closeDialog" style="margin-top: 20px;">返回</div>
                </div>
                {elseif $row['type']=='return'}
                <div class="dialog detail-box" id="return">
                    <div class="weui-cells__title q-title">{$row['title']}</div>
                    <div class="q-content">
                        {loop $row['list'] $item}
                        {if $item['type']=='txt'}
                        <div>{$item['title']}</div>
                        {elseif $itemn['type']=='mobile'}
                        <div>{$item['title']}<a href="tel:{$item['value']}">{$item['value']}</a></div>
                        {else}
                        {/if}
                        {/loop}
                    </div>
                    <div class="button-sp-area">
                        <a open-type="navigateBack" class="weui-btn weui-btn_primary closeDialog" aria-role="button">上一步</a>
                        <a class="weui-btn weui-btn_info refund_detail">申请退款</a>
                    </div>
                </div>
                <div class="page dialog" id="return_form" style="display: none;">
                    <div class="page__bd">
                        <form>
                            <div class="weui-cell" aria-role="option" style="background: #efefef">
                                <div class="weui-cell__bd reason" style="font-size: 24px;text-align: center;" id="reason">申请退款</div>
                            </div>

                            <div class="weui-cells__title">定单信息</div>
                            <div class="weui-cells weui-cells_after-title">
                                <div class="weui-cell" aria-role="option" style="padding:0.32rem 0.32rem 0rem 0.32rem">
                                    <div class="weui-cell__bd" style="font-size: 0.28rem;" >{$info['order']}</div>
                                </div>
                            </div>
                            <div class="weui-cells__title">申请退款理由</div>
                            <div class="weui-cells weui-cells_after-title">
                                <div class="weui-cell weui-cell_active" style="padding:0.32rem 0.32rem 0rem 0.32rem">
                                    <div class="weui-cell__bd">
                                        <textarea name="content" class="weui-textarea" placeholder-class="weui-input__placeholder" id="detail" placeholder="请输入退款理由" style="height: 4.3em"></textarea>
                                        <div aria-role="option" class="weui-textarea-counter"><span id="txtNum">0</span>/400</div>
                                    </div>
                                </div>
                            </div>

                            <div class="weui-cells__title">联系电话</div>
                            <div class="weui-cells weui-cells_after-title">
                                <div class="weui-cell weui-cell_active">
                                    <div class="weui-cell__bd">
                                        <input name="mobile" type="tel" style="height: 100%;width: 100%;"  maxlength="11" cursor-spacing="150" class="weui-input" placeholder-class="weui-input__placeholder" id="mobile" placeholder="请输入联系电话"/>
                                    </div>
                                </div>
                            </div>
                            <div class="button-sp-area">
                                <a open-type="navigateBack" class="weui-btn weui-btn_primary closeDialog" aria-role="button">上一步</a>
                                <a class="weui-btn weui-btn_primary refund">申请退款</a>
                            </div>
                        </form>
                    </div>
                    <div class="tips"><span>请输入手机号</span></div>
                </div>
                {elseif $row['type']=='input'}
                <div class="page dialog" id="form" style="display: none;">
                    <div class="page__bd">
                        <form>
                            <div class="weui-cells__title">投诉原因</div>
                            <div class="weui-cells weui-cells_after-title">
                                <div class="weui-cell" aria-role="option">
                                    <div class="weui-cell__bd reason" id="reason2">{$row['title']}</div>
                                </div>
                            </div>

                            <div class="weui-cells__title">投诉描述</div>
                            <div class="weui-cells weui-cells_after-title">
                                <div class="weui-cell weui-cell_active" style="padding:0.32rem 0.32rem 0rem 0.32rem ">
                                    <div class="weui-cell__bd">
                                        <textarea name="content" class="weui-textarea" placeholder-class="weui-input__placeholder" id="detail2" placeholder="请输入要投诉描术" style="height: 4.3em" ></textarea>
                                        <div aria-role="option" class="weui-textarea-counter"><span id="txtNum">0</span>/400</div>
                                    </div>
                                </div>
                            </div>

                            <div class="weui-cells__title">联系电话</div>
                            <div class="weui-cells weui-cells_after-title">
                                <div class="weui-cell weui-cell_active">
                                    <div class="weui-cell__bd">
                                        <input name="mobile" type="tel" style="height: 100%;width: 100%;" maxlength="11" cursor-spacing="150" class="weui-input" placeholder-class="weui-input__placeholder" id="mobile2" placeholder="请输入联系电话"/>
                                    </div>
                                </div>
                            </div>
                            <div class="button-sp-area">
                                <a open-type="navigateBack" class="weui-btn weui-btn_primary closeDialog" aria-role="button">上一步</a>
                                <a class="weui-btn weui-btn_primary complain">提交</a>
                            </div>
                        </form>
                    </div>
                    <div class="tips"><span>请输入手机号</span></div>
                </div>
                {else}
                {/if}
            </div>
            {/loop}
        </div>
    </div>

    {if !empty($info['worker_mobile'])}
    <div class="zskf">
        <a href="tel:{$info['worker_mobile']}">
            <h2><em class="fr" style="width: 9px;height: 18px;margin-top: 19px;"></em>
                专属客服<span style="padding-left: 1.07rem;"><img src="{$info['worker_avatar']}">{$info['worker_username']}<b>{$info['worker_mobile']}</b></span></h2>
        </a>
    </div>
    {/if}
    <!--    <div class="bbsy">-->
    <!--        <div class="bbsy_tit">-->
    <!--            <h2>{$info['jubf']}</h2>-->
    <!--        </div>-->
    <!--        <div class="bbsy_nr">-->
    <!--            <ul>-->
    <!--                <li><span>咨询电话</span>{$info['mobile']}</li>-->
    <!--                {if !empty($info['addresstxt'])}-->
    <!--                <li><span>地址</span>{$info['addresstxt']}</li>-->
    <!--                {/if}-->
    <!--            </ul>-->
    <!--        </div>-->
    <!--    </div>-->
</div>
{/if}
<div class="modal" style="display: none;" id="suc">
    <div class="modal_content">
        <div class="title">操作提示</div>
        <div class="desc">您的反馈信息我们已经收到，会在48小时内受理，您可以通过此链接查看进度，期间请注意接听电话</div>
        <a class="button" href="javascript:goHome()">确定</a>
    </div>
</div>

</body>
</html>
<script>
    // $(".closeDialog").click(function(){
    //     $(this).parent(".dialog").hide();
    // })
    // $(".openDialog").click(function(){
    //     $(this).next(".dialog").show();
    // });

    // 打开dialog
    $('.openDialog').click(function() {
        $(this).next('.dialog').show();
    })
    // 绑定投诉提交
    // status = 0
    $('a.complain').each(function() {
        $(this).bind('click', debounce(() => {
            var form = $(this).parents('form');
            var reason = form.find('div.reason').html();
            var postData = serializeObject(form.serializeArray());
            submit_complain(reason, postData.content, postData.mobile, 0, 0);
        }))
    })
    // 绑定发起退款
    // status = 0
    $('a.refund').each(function() {
        $(this).bind('click', debounce(() => {
            var form = $(this).parents('form');
            var reason = form.find('div.reason').html();
            var postData = serializeObject(form.serializeArray());
            submit_complain(reason, postData.content, postData.mobile, 0, 0);
        }))
    })
    // 绑定客户回复信息
    // status = 2
    $('a.reply').each(function() {
        $(this).bind('click', debounce(() => {
            var form = $(this).parents('form');
            var postData = serializeObject(form.serializeArray());
            submit_complain('', postData.content, '', 2, postData.com_id);
        }))
    })
    // 绑定客户确认完结
    // status = 3
    $('a.resolved').each(function() {
        $(this).bind('click', debounce(() => {
            var form = $(this).parents('form');
            var postData = serializeObject(form.serializeArray());
            submit_complain('', postData.content, '', 3, postData.com_id);
        }))
    })
    // 显示退款详情
    $('a.refund_detail').each(function() {
        $(this).bind('click', function() {
            var parent = $(this).parents('.dialog');
            parent.hide();
            parent.next().show();
        })
    })
    // 返回
    $('.closeDialog').click(function() {
        $(this).parents('.dialog').hide();
    })

    function goHome(){
        window.history.back();
    } 
    //客户回复信息
    // 废弃
    /*function subComplain3() {
        var detail = $("#detail3").val();
        var status = 2;
        var com_id = $("#com_id").val();
        submit_complain('',detail,'',status,com_id);
    }*/
    //客户确认完结
    // 废弃
    /*function subComplain4() {
        var detail = $("#detail3").val();
        var status = 3;
        var com_id = $("#com_id").val();
        submit_complain('',detail,'',status,com_id);
    }*/

    //客户发起投诉信息
    // 废弃
    /*function subComplain() {
        var reason = $("#reason").html();
        var detail = $("#detail").val();
        var mobile = $("#mobile").val();
        var status = 0;
        submit_complain(reason,detail,mobile,status,0);
    }*/
    // 废弃
    /*function subComplain2() {
        var reason = $("#reason2").html()
        var detail = $("#detail2").val();
        var mobile = $("#mobile2").val();
        var status = 0;
        // submit_complain(reason,detail,mobile,status,0);
    }*/
    function submit_complain(reason,detail,mobile,status,com_id){
        if(!reason && status==0){
            $(".tips").html("<span>请重新进入页面</span>").show().animate({opacity:"1"},0,function(){
                setTimeout(function(){
                    $(".tips").hide();
                },2000);
            });
            return;
        }
        if(!detail && status!=3){
            $(".tips").html("<span>请输入描述</span>").show().animate({opacity:"1"},0,function(){
                setTimeout(function(){
                    $(".tips").hide();
                },2000);
            });
            return;
        }
        if(!mobile && status==0){
            $(".tips").html("<span>请输入手机号</span>").show().animate({opacity:"1"},0,function(){
                setTimeout(function(){
                    $(".tips").hide();
                },2000);
            });
            return;
        }
        if(!isMobile(mobile) && status==0){
            $(".tips").html("<span>手机号错误</span>").show().animate({opacity:"1"},0,function(){
                setTimeout(function(){
                    $(".tips").hide();
                },2000);
            });
            return;
        }

        $.ajax({
            url:'/{php echo createMobileUrl("complain",array("themeid"=>$_P["themeid"],"op"=>"save"));}',
            dataType:'json',
            method:'post',
            data:{
                type:reason,
                content:detail,
                mobile:mobile,
                status:status,
                com_id:com_id,
            },
            success:function (e) {
                if(e.error==0){
                    $("#suc").show();
                }else{
                    alert(e.msg);
                    location.reload()
                }
            },
            fail:function (err) {
                console.log(err)
            }
        })
    }

    function isMobile(mobile,tips){
        if(mobile.length!=11){
            return false;
        }else{
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
            if (!myreg.test(mobile)) {
                return false;
            }else{
                return true;
            }
        }
    }

    /*function return_form(){
        reason="";
        $("#return").hide();
        $("#return_form").show();
    }*/
    /*function back(){
        reason="";
        $("#form").hide();
        $("#return").hide();
        $("#return_form").hide();
        $("#home").show();
    }*/
    // serializeArray数组转为json
    function serializeObject(array) {
        var result = {};
        var extend = function(i, element) {
            var node = result[element.name];
            if ('undefined' !== typeof node && node !== null) {
                if ($.isArray(node)) {
                    node.push(element.value);
                } else {
                    result[element.name] = [node, element.value];
                }
            } else {
                result[element.name] = element.value;
            }
        }
        $.each(array, extend);
        return result;
    }
    // 点击事件防抖 需注意this的指向问题
    function debounce(fn, wait){
        let timer = null;
        return function() {
            if(timer !== null) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, wait ? wait : 300);
        }
    }
    // $("#detail").bind('input propertychange', function(){
    //     $("#txtNum").html(($("#detail").val()+"").length)
    // })
    // 绑定textarea字数
    $("textarea[name='content']").each(function(){
        $(this).bind('input propertychange', function(){
            $(this).next().children('span').html(($(this).val()+'').length);
        })
    })
    
</script>